<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Elix CalendarMonthNavigator</title>

    <link rel="stylesheet" href="demos.css" />
    <script type="module" src="../define/CalendarMonthNavigator.js"></script>

    <style>
      @media (prefers-color-scheme: dark) {
        body {
          background: black;
        }
      }
    </style>
  </head>

  <body role="main">
    <div class="demo padded">
      <style>
        @media (prefers-color-scheme: dark) {
          #sampleCalendar {
            background: black;
            color: white;
          }
        }
      </style>
      <elix-calendar-month-navigator
        id="sampleCalendar"
      ></elix-calendar-month-navigator>
    </div>
  </body>
</html>
